<template>
  <div :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
import 'echarts-liquidfill/src/liquidFill.js'
require('echarts/theme/royal') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'royal')

      this.chart.setOption({
        // 图表主标题
        title: {
          text: '一周用户增长率', // 主标题文本，支持使用 \n 换行
          top: 20, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
          left: 'center', // 值: 'left', 'center', 'right' 同上
          textStyle: {
            // 文本样式
            fontSize: 30,
            fontWeight: 600,
            color: '#fff'
          }
        },
        // 提示框组件
        tooltip: {
          trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          textStyle: {
            color: '#fff' // 文字颜色
          },
          // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
          // 水球图: {a}（系列名称），{b}（无），{c}（数值）
          // 使用函数模板   传入的数据值 -> value: number|Array,
          formatter: function(value) {
            return value.seriesName + ': ' + value.data * 100 + '%'
          }
        },
        series: [
          {
            type: 'liquidFill',
            name: '一周用户增长率', // 系列名称，用于tooltip的显示，legend 的图例筛选
            radius: '62%', // 水球图的半径
            center: ['50%', '60%'], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
            // 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形
            // diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的path
            // shape: 'circle',
            shape:
              'path://M1112.485647 298.827294l17.528471 13.914353c41.562353 31.924706 73.968941 72.643765 84.570353 122.096941l2.228705 12.589177-0.12047 0.361411 1.024-0.12047c47.766588-12.830118 104.026353-10.661647 147.877647 11.324235l10.661647 5.963294 16.745412 10.420706-10.059294 17.227294c-37.586824 76.016941-117.639529 96.677647-196.969412 93.244236-121.012706 290.093176-376.289882 424.719059-687.525647 424.719058-156.009412 0-299.730824-57.825882-384.662588-185.825882l-9.155765-14.456471v-3.373176l-13.613177-24.214588a388.397176 388.397176 0 0 1-32.707764-178.597647l1.445647-18.371765 3.312941-20.600471h892.506353c31.683765 0.481882 63.247059-4.216471 93.485176-13.854117 13.432471-7.107765 30.960941-13.793882 45.056-21.022118-17.468235-24.094118-27.467294-55.175529-30.84047-86.437647-3.011765-37.526588 5.722353-86.618353 28.009412-118.663529l7.047529-9.035294 14.155294-17.28753z m-786.552471 386.710588c-41.441882 0-72.583529 31.322353-72.583529 69.210353 0 35.297882 30.057412 64.813176 64.993882 68.547765l7.529412 0.421647c38.369882 0 72.944941-31.081412 72.944941-69.029647 0-37.948235-31.262118-69.150118-72.884706-69.150118z m445.44-293.406117v134.746353H636.084706V392.252235h135.107765l0.12047-0.12047z m165.466353 0v134.746353h-134.686117V392.252235h134.324706l0.361411-0.12047z m-500.555294 0v134.746353H301.658353V392.252235h134.204235l0.542118-0.12047z m168.899765 0v134.746353h-134.324706V392.252235h133.541647l0.783059-0.12047z m-334.486588 0v134.746353H135.529412V392.252235h133.421176l1.686588-0.12047z m500.555294-169.261177l0.12047 0.180706v134.505412H636.084706V222.930824h135.107765z m-166.851765 0l0.783059 0.180706v134.505412h-134.324706V222.930824h133.481412z m-169.261176 0l0.903529 0.180706v134.505412H301.778824V222.930824h133.360941zM771.373176 50.236235V184.922353H636.084706V50.176h135.228235z',
            phase: 6, // 波的相位弧度 不设置  默认自动
            direction: 'right', // 波浪移动的速度  两个参数  left 从右往左 right 从左往右
            outline: {
              show: true,
              borderDistance: 0, // 边框线与图表的距离 数字
              itemStyle: {
                opacity: 1, // 边框的透明度   默认为 1
                borderWidth: 1, // 边框的宽度
                shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
                shadowColor: '#fff', // 边框的阴影颜色,
                borderColor: '#41dcd8' // 边框颜色
              }
            },
            // 图形样式
            itemStyle: {
              // color: '#4077eb', // 水球显示的背景颜色
              // opacity: 0.5, // 波浪的透明度
              shadowBlur: 40 // 波浪的阴影范围
            },
            backgroundStyle: {
              // color: '#407bf3', // 水球未到的背景颜色
              // color: '#ffffff', // 水球未到的背景颜色
              // opacity: 0.5
            },
            // 图形的高亮样式
            emphasis: {
              itemStyle: {
                // opacity: 0.8 // 鼠标经过波浪颜色的透明度
              }
            },
            // 图形上的文本标签
            label: {
              fontSize: 55,
              fontWeight: 400
              // color: '##1A6BE6'
            },
            data: [0.6, 0.55, 0.5, 0.45], // 系列中的数据内容数组
            animationEasing: 'cubicInOut',
            animationDuration: 2600
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
.chart {
  background: url('~@/assets/echarts/liquidFill/fill-border.gif') no-repeat
    center bottom;
  /* background-size: 80% 80%; */
}
</style>
